<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <meta name="description" content=""/>
        <meta name="keywords" content=""/>
        
        <title>ziceinclude&trade; admin version 1.4 online</title>

        <!-- Link shortcut icon-->
        <link rel="shortcut icon" type="image/ico" href="images/favicon2.ico"/> 

        <!-- Link css-->
        <link rel="stylesheet" type="text/css" href="css/zice.style.css"/>
		
        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="components/flot/excanvas.min.js"></script><![endif]-->  
		
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="components/ui/jquery.ui.min.js"></script> 
        <script type="text/javascript" src="components/ui/jquery.autotab.js"></script>
        <script type="text/javascript" src="components/ui/timepicker.js"></script>
        <script type="text/javascript" src="components/colorpicker/js/colorpicker.js"></script>
        <script type="text/javascript" src="components/checkboxes/iphone.check.js"></script>
        <script type="text/javascript" src="components/elfinder/js/elfinder.full.js"></script>
        <script type="text/javascript" src="components/datatables/dataTables.min.js"></script>
        <script type="text/javascript" src="components/datatables/ColVis.js"></script>
        <script type="text/javascript" src="components/scrolltop/scrolltopcontrol.js"></script>
        <script type="text/javascript" src="components/fancybox/jquery.fancybox.js"></script>
        <script type="text/javascript" src="components/jscrollpane/mousewheel.js"></script>
        <script type="text/javascript" src="components/jscrollpane/mwheelIntent.js"></script>
        <script type="text/javascript" src="components/jscrollpane/jscrollpane.min.js"></script>
        <script type="text/javascript" src="components/spinner/ui.spinner.js"></script>
        <script type="text/javascript" src="components/tipsy/jquery.tipsy.js"></script>
        <script type="text/javascript" src="components/editor/jquery.cleditor.js"></script>
        <script type="text/javascript" src="components/chosen/chosen.js"></script>
        <script type="text/javascript" src="components/confirm/jquery.confirm.js"></script>
        <script type="text/javascript" src="components/validationEngine/jquery.validationEngine.js"></script>
        <script type="text/javascript" src="components/validationEngine/jquery.validationEngine-en.js"></script>
        <script type="text/javascript" src="components/vticker/jquery.vticker-min.js"></script>
        <script type="text/javascript" src="components/sourcerer/sourcerer.js"></script>
        <script type="text/javascript" src="components/fullcalendar/fullcalendar.js"></script>
        <script type="text/javascript" src="components/flot/flot.js"></script>
        <script type="text/javascript" src="components/flot/flot.pie.min.js"></script>
        <script type="text/javascript" src="components/flot/flot.resize.min.js"></script>
        <script type="text/javascript" src="components/flot/graphtable.js"></script>
        <script type="text/javascript" src="components/uploadify/swfobject.js"></script>
        <script type="text/javascript" src="components/uploadify/uploadify.js"></script>        
        <script type="text/javascript" src="components/checkboxes/customInput.jquery.js"></script>
        <script type="text/javascript" src="components/effect/jquery-jrumble.js"></script>
        <script type="text/javascript" src="components/filestyle/jquery.filestyle.js"></script>
        <script type="text/javascript" src="components/placeholder/jquery.placeholder.js"></script>
		<script type="text/javascript" src="components/Jcrop/jquery.Jcrop.js"></script>
        <script type="text/javascript" src="components/imgTransform/jquery.transform.js"></script>
        <script type="text/javascript" src="components/webcam/webcam.js"></script>
		<script type="text/javascript" src="components/rating_star/rating_star.js"></script>
		<script type="text/javascript" src="components/dualListBox/dualListBox.js"></script>
		<script type="text/javascript" src="components/smartWizard/jquery.smartWizard.min.js"></script>
		<script type="text/javascript" src="components/maskedinput/jquery.maskedinput.js"></script>
        <script type="text/javascript" src="components/highlightText/highlightText.js"></script>
		<script type="text/javascript" src="components/elastic/jquery.elastic.source.js"></script>
        <script type="text/javascript" src="js/jquery.cookie.js"></script>
        <script type="text/javascript" src="js/zice.custom.js"></script>    
		<script type="text/javascript">
        $(function() {
            $('#text-search').bind('keyup change', function(ev) {
                var searchTerm = $(this).val();
                $('.text-search-data').removeHighlight();
                if ( searchTerm ) {
                    $('.text-search-data').highlight( searchTerm );
                }
            });
        });
        </script>
        </head>        
        <body class="dashborad">        
        <div id="alertMessage" class="error"></div>
		<!-- Header -->
        <div id="header">
                <div id="account_info"> 
					<div class="setting"><b>Welcome,</b> <b class="red">John Doe</b><img src="images/gear.png" class="gear"  alt="Profile Setting" >
                        <ul class="subnav ">
                            <li><a href="#">Setting</a></li>
							<br class="clear"/>
                        </ul>
                  </div>
					<div class="logout" title="Disconnect"><b >Logout</b> <img src="images/connect.png" name="connect" class="disconnect" alt="disconnect" ></div> 
                </div>
            </div><!-- End Header -->
			<div id="shadowhead"></div>

              <div id="left_menu">
                    <ul id="main_menu" class="main_menu">
                      <li class="limenu" ><a href="dashboard.html"><span class="ico gray shadow home" ></span><b>Dashboard</b></a></li>
                      <li class="limenu" ><a href="#" ><span class="ico gray shadow window"></span><b>Form elements</b></a>
                        <ul>
                          <li ><a href="form.html"> basic form </a></li>
                          <li ><a href="vform.html"> validation </a></li>
                          <li ><a href="wizard.html"> wizard </a></li>
                        </ul>
                      </li>
                      <li class="limenu" ><a href="#"><span class="ico gray  dimensions" ></span><b>Sample pages</b></a>
                        <ul>
                          <li ><a href="profile.html"> Profile setting </a></li>
                          <li ><a href="conversation.html"> conversation</a></li>
                          <li ><a href="imagesEditor.html"> Images Editor </a></li>
                          <li ><a href="barcode.html"> barcode </a></li>
                          <li ><a href="messages.html"> messages </a></li>
                          <li ><a href="grid.html"> Grid System </a></li>
                        </ul>
                      </li>
					  <li class="limenu" ><a href="ajax.html"><span class="ico gray shadow   encrypt"></span><b>Sample ajax</b> </a></li>
                      <li class="limenu" ><a href="table.html"><span class="ico gray shadow  spreadsheet"></span><b>Tables</b> </a></li>
                      <li class="limenu" ><a href="gallery.html"><span class="ico gray shadow pictures_folder"></span><b>Gallery </b></a></li>
                      <li class="limenu" ><a href="#"><span class="ico gray shadow stats_lines"></span><b>Graph and Charts</b> </a>
                        <ul>
                          <li><a href="modalchartLive.html" class="pop_box">live chart </a></li>
                          <li><a href="chart.html">all chart</a></li>
                        </ul>
                      </li>
                      <li class="limenu" ><a href="filemanager.html"><span class="ico gray shadow  file"></span><b>File manager </b></a></li>
                      <li class="limenu" ><a href="calendar.html"><span class="ico gray shadow calendar"></span><b>Calendar </b></a></li>
                      <li class="limenu select" ><a href="typography.html"><span class="ico gray  shadow paragraph_align_left"></span><b>Typography</b></a></li>
                      <li class="limenu" ><a href="inelement.html"><span class="ico gray shadow abacus"></span><b>Interface elements </b></a></li>
                      <li class="limenu" ><a href="map.html"><span class="ico gray shadow  location"></span><b>Map location </b></a></li>
                      <li class="limenu" ><a href="icon.html"><span class="ico gray  shadow satellite"></span><b>Icon and Button </b></a></li>
					  <li class="limenu" ><a href="404.html"><span class="ico gray  shadow firewall"></span><b>Error Pages</b></a></li>
                      <li class="limenu" ><a href="doc.html"><span class="ico gray  notepad"></span><b>Documentation</b></a></li>

                        
                    </ul>
              </div>
               <div id="expandbtn"><span class="off">&nbsp;</span><span class="on">&nbsp;</span></div>

            
            <div id="content">
                <div class="inner">
					<div class="topcolumn">
						<div class="logo"></div>
                            <ul  id="shortcut">
                                <li> <a href="#" title="Back To home"> <img src="images/icon/shortcut/home.png" alt="home"/><strong>Home</strong> </a> </li>
                                <li> <a href="#" title="Website Graph"> <img src="images/icon/shortcut/graph.png" alt="graph"/><strong>Graph</strong> </a> </li>
                                <li> <a href="#" title="Setting" > <img src="images/icon/shortcut/setting.png" alt="setting" /><strong>Setting</strong></a> </li> 
                                <li> <a href="#" title="Messages"> <img src="images/icon/shortcut/mail.png" alt="messages" /><strong>Message</strong></a><div class="notification" >10</div></li>
                            </ul>
					</div>
                    <div class="clear"></div>               
    
					<!-- full width -->
                    <div class="widget">
                        <div class="header"><span><span class="ico gray paragraph_align_left"></span>Typography</span>
                            <div class="searchBox">
                            <div class="searchAutocomplete"></div>
                            <div class="searchText">
                                <form action="http://www.google.com" method="GET">
                                    <input  type="text"  nane="s" id="sAtcom"placeholder="Live Search..."/>
                                </form>
                            </div>
                            </div>

                            <div id="buttom_top">
                                <ul class="uibutton-group">
                                      <li><a class="uibutton  special pop_box"  href="modatypographyl.html">Modal View</a></li>
                                </ul>
                            </div>
                        </div><!-- End header -->	
                        <div class="content" >
						<!-- title box -->
                        <div class="boxtitle"><span class="ico gray font_size"></span> Search text  with color Highlight</div>
                        <form id="demo"> 
                              <div class="section " >
                                  <label> Search text <small>High Light</small></label>   
                                  <div><input type="text" id="text-search" placeholder="Text Search"  class=" medium"/></div>
                             </div>
                              <div class="section " >
                                  <label>  Text Data<small>Contant</small></label>   
                                  <div>
                            <p class="text-search-data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non leo convallis nibh tristique commodo. Cras tincidunt hendrerit pharetra. Etiam erat magna, egestas sed placerat at, congue sed nisi. Nullam eget varius leo. Integer at justo a velit imperdiet pulvinar. Sed magna mi, sodales sit amet aliquet ac, eleifend eget sem. Nam ipsum lectus, fringilla sed rutrum ac, tempus in orci. Pellentesque condimentum dui a elit rutrum at posuere tellus dignissim. Aliquam erat volutpat. Suspendisse potenti. Sed convallis convallis tellus, id volutpat leo euismod in. Curabitur dapibus commodo vehicula. Nullam varius, lacus at porta pellentesque, dolor massa rutrum lorem, vehicula dapibus dui erat nec mi. Donec condimentum lectus ut ligula condimentum et luctus orci pharetra. Fusce semper tempor dui, vitae sollicitudin mauris volutpat in. Aliquam erat volutpat.</p>
                                  </div>
                             </div>
                          </form>
                          
                          <br /><br />
            
            <div class="widgets">
                <div class="oneTwo">
                            <h1>Tag Heading 1</h1>
                            <h2>Tag Heading 2</h2>
                           <h3>Tag Heading 3</h3>
                           <h4>Tag Heading 4</h4>                         
                           <h5>Tag Heading 5</h5>
                          <h6>Tag Heading 6</h6>
                </div>
                
                <div class="oneTwo">
                            <h1 class="unline">Tag Heading 1 unline</h1>
                            <h2 class="unline">Tag Heading 2 unline</h2>
                           <h3 class="unline">Tag Heading 3 unline</h3>
                           <h4 class="unline">Tag Heading 4 unline</h4>                         
                           <h5 class="unline">Tag Heading 5 unline</h5>
                          <h6 class="unline">Tag Heading 6 unline</h6>
                </div>
            </div><!-- End Half width column -->         
            <div class=" clear"></div>
            
            <h3 >list stlye</h3>
            
            <!-- Half width column-->
            <div class="widgets">
                <div class="oneTwo">
                    <ul class="list_arrow">
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                    </ul>
              </div>
              
                <div class="oneTwo">
                    <ul class="list_arrow2">
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                    </ul>
                </div>
                
            </div><!-- End Half width column -->
            
            <div class="widgets">
                <div class="oneTwo">
                    <ol class="rounded-list">
            
                        <li><a href="">List item</a></li>
                        <li><a href="">List item</a></li>
                        <li><a href="">List item</a>
                            <ol>
                              <li><a href="">List sub item</a></li>
                                <li><a href="">List sub item</a></li>
            
                                <li><a href="">List sub item</a></li>
                          </ol>
                      </li>
                        <li><a href="">List item</a></li>
                        <li><a href="">List item</a></li>						
                    </ol>
              </div>
              
                <div class="oneTwo">
                    <ol class="rectangle-list">
            
                        <li><a href="">List item</a></li>
                        <li><a href="">List item</a></li>
                        <li><a href="">List item</a>
                            <ol>
                              <li><a href="">List sub item</a></li>
                                <li><a href="">List sub item</a></li>
            
                                <li><a href="">List sub item</a></li>
                          </ol>
                      </li>
                        <li><a href="">List item</a></li>
                        <li><a href="">List item</a></li>			
                    </ol>
                </div>
                
                </div><!-- End Half width column -->
                	
          
            <h3>overflow stlye</h3>
            <div class="overflow" style="height:300px">
<pre class="showCodeJS">
$.fn.imgdata = function(key){
	return this.find('.dataImg li:eq('+key+')').text();
}
$.fn.hdata = function(key){
	return this.find('.dataSet li:eq('+key+')').text();
}
var buttonActions = {
	'hide_menu':function(){
		$('#hide_menu').hide();			   
		$('#left_menu').animate({ left: "-213px" }, 200 );
		$('#show_menu').show();
		$('#content').animate({ marginLeft: "40px" }, 200 );
		$('#wysiwyg').css('width', '97%');
	},	
	  'show_menu':function(){			   
		  $(this).hide();			
		  $('#hide_menu').show();
		  $('#left_menu').animate({ left: "0px" }, 200 );
		  $('#content').animate({ marginLeft: "240px" }, 200 );
		  $('#wysiwyg').css('width', '233px');
	},
	  'close_windows':function(){
		  $.fancybox.close(); 
		  ResetForm();
	}
	
}</pre>
            </div>
            
                            <!-- clear fix -->
							<div class="clear"></div>

                        </div><!-- End content -->
                    </div><!-- End full width -->

					<!-- clear fix -->
					<div class="clear"></div>

                    <div id="footer"> &copy; Copyright 2012 <span class="tip"><a  href="#" title="Nextop.Asia co.,Ltd." >Nextop.Asia</a> </span> </div>

                </div> <!--// End inner -->
              </div> <!--// End content --> 
</body>
</html>